import React from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import axios from "axios";
function Index() {
  const navigate = useNavigate();
  // const userReg = /^1[3-9]\d{9}$/;
  // const pasdReg = /\w{6,12}/;

  const Reg = /\w{2,12}/;
  const onFinish = async (values) => {
    const resp = await axios.post("/xx/login", values);
    const { code, data, message } = resp.data;
    if (code === 0) {
      //提示
      Toast.show({
        icon: "success",
        content: message,
      });

      //保存token、用户信息
      localStorage.setItem("token", data.token);
      localStorage.setItem(
        "userInfo",
        JSON.stringify({
          avatar: data.avatar,
          username: data.username,
        })
      );

      //跳转
      navigate("/");
    } else {
      Toast.show({
        icon: "fail",
        content: message,
      });
    }
  };

  return (
    <div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Header>2212A车票登陆</Form.Header>
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            { required: true, message: "用户名不能为空" },
            // { pattern: Reg, message: "请输入正确的用户名" },
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            { required: true, message: "密码不能为空" },
            { pattern: Reg, message: "请输入正确的密码" },
          ]}
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
